<template>
  <canvas
    ref="canvas"
    id="myCanvas"
    :width="width"
    :height="height"
  ></canvas>
</template>

<script>
export default {
  name: 'LightText',
  props: {
    width: {
      type: Number,
      default: 800
    },
    height: {
      type: Number,
      default: 60
    },
    text: {
      type: String,
      default: '国内顶尖实时音视频解决方案'
    },
    gradients: {
      type: Array,
      default: () => [
        '#5191e1',
        '#ddd4e4'
      ]
    }
  },
  mounted () {
    const canvas = this.$refs.canvas
    const context = canvas.getContext('2d')
    context.font = '50px 宋体'
    const myGradient = context.createLinearGradient(0, 0, 2000, 0)
    this.gradients.forEach((color, index) => {
      myGradient.addColorStop(index / this.gradients.length, color)
    })
    context.fillStyle = myGradient
    for (let i = 0; i < 1; i++) {
      context.shadowColor = 'rgba(255,255,255,0.5)'
      context.shadowOffsetX = i * 2
      context.shadowOffsetY = -i * 2
      context.shadowBlur = i * 2
      context.fillText(this.text, 0, 50)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
